<template>
  <div class="page">
    <div class="J-account">
      <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
          <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
          <div class="weui-cell__bd">
            <input class="weui-input" style="width:100%" type="number" v-model="from.telephone" pattern="[0-9]*" placeholder="请输入手机号">
          </div>
        </div>
        <div class="weui-cell weui-cell_vcode">
          <div class="weui-cell__hd">
            <label class="weui-label">验证码</label>
          </div>
          <div class="weui-cell__bd">
            <input class="weui-input" type="number" v-model="from.verifyCode" placeholder="请输入验证码">
          </div>
          <div class="weui-cell__">
            <button class="weui-vcode-btn" @click="clilkGetTime" :disabled="codeDisabled" v-text="codeText"></button>
          </div>
        </div>
      </div>
      <div class="J-button-subit">
        <a href="javascript:;" @click="submitTelephone" class="weui-btn weui-btn_primary">提交</a>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'account',
    data () {
      return {
        telephone: '',
        code: '',
        countdown: 60,
        clearTime: null,
        codeText: '点击获取',
        codeDisabled: false,
        from: {
          telephone:'',
          verifyCode:''
        }
      }
    },
    components: {

    },
    methods: {
      //校验手机号是否合法
      isPhoneNum (val){
        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/;
        if(!myreg.test(val)){;
          return false;
        }else{
          return true;
        }
      },
      setTime () {
        var _this = this
        if (_this.countdown == 0) {
          _this.codeText = '重新获取'
          _this.codeDisabled = false
        } else {
          _this.codeDisabled = true
          _this.codeText = this.countdown + 's'
          _this.countdown--;
        }
        _this.clearTime = setTimeout(function () {
          _this.setTime()
        }, 1000)
      },
      clilkGetTime () {
        if(this.codeDisabled)return;
        clearTimeout(this.clearTime);
        var isPhone = this.isPhoneNum(this.from.telephone)
        if (this.from.telephone == '') {
          this.$store.dispatch('TOAST_SHOW', {content: '手机号码不能为空', msg: true})
          return;
        }
        if (!isPhone) {
          this.$store.dispatch('TOAST_SHOW', {content: '手机号码不正确', msg: true})
          return;
        }
        this.countdown = 60;
        this.setTime()
        this.getCode()
      },
      getCode () {
        this.$store.dispatch('getSmsCode',this.from)
      },
      submitTelephone () {
        this.$store.dispatch('telephoneBind',this.from)
      }
    }
  }
</script>
<style lang="scss">
  .J-account {
    .weui-label{
      font-size:16px;
    }
    .weui-cells{
      margin-top:0;
    }
    .weui-cell__bd input,.weui-vcode-btn{
      width:100px;
      font-size:16px;
    }
    .weui-cell:before{
      left:0
    }
  }
</style>
